<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货架管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <br>
    <br>
            <span class="demonstration">货架编号</span>
            <el-input v-model="shelvesNo12" placeholder="请输入货架编号" style="width: 300px" clearable></el-input>
    <br>
    <br>
            <el-button type="primary" @click="onSubmit1">查询</el-button>

    <br>
    <br>
    <!--  中部的新增按钮(对话框货区表单)  -->
    <el-button type="warning" icon="el-icon-plus" @click="dialogFormVisible12 = true">新建货架</el-button>
    <br>
    <br>
    <el-container>
    <!--  下部的货区显示表格 + 分页模块  -->
    <el-aside width="200px">
        <div style="background: #b3d8ff;width:100%;padding: 5px 10px">
            <span style="font-size: 20px;color: #fff;">现有货架列表</span>
        </div>
        <el-menu
                @select="selectTwo"
                @open="selectOne"
                class="el-menu-vertical-demo">
            <el-submenu  :index="w.id"  v-for="w in ware">
                <template slot="title">
                    <i class="el-icon-folder"></i>
                    <span>{{w.wareName}}</span>
                </template>
                <el-submenu :index="c.id" v-for="c in w.cargoAreas">
                        <template slot="title">
                            <i class="el-icon-folder"></i>
                            <span>{{c.goodsName}}</span>
                        </template>
                        <el-menu-item-group >
                            <el-menu-item :index="t.id" v-for="t in c.tshelves">
                                <template slot="title">
                                    <i class="el-icon-tickets"></i>
                                    <span>{{t.shelvesNo}}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </el-aside>
    <el-container>
            <!--主栏-->
        <el-table
                :data="tableData"
                style="width: 100%">
            <!--<el-table-column
                    type="index"
                    :index="indexMethod">
            </el-table-column>-->
            <el-table-column
                    label="货架编号"
                    >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.shelvesNo }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属货区"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货区编号"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goodsNo }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="负责人"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.person }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="联系电话"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="主要商品"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.deteTime1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px;background-color: #5daf34;border: 1px solid #5daf34" v-if=" scope.row.status == 0" >未满</span>
                    <span style="margin-left: 10px;background-color: #c0ccda;border: 1px solid #c0ccda" v-if=" scope.row.status == 1" >满货</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 0"
                            size="mini"
                            type="success"
                            @click="handleEdit(scope.$index, scope.row)" icon="el-icon-check"></el-button>
                    <el-button v-else
                               size="mini"
                               disabled
                               type="success"
                               @click="handleEdit(scope.$index, scope.row)" icon="el-icon-check"></el-button>
                    <el-button
                            size="mini"
                            type="success"
                            @click="handleDelete(scope.$index, scope.row)" icon="el-icon-edit"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-container>
    </el-container>
    <div style="padding-left:300px">
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    </div>

    <el-dialog title="设置货架" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="shelvesAll">
            <el-form-item label="货架编号：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.shelvesNo" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属货区：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.goodsName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="负责人：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.person" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="主要商品：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.pname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.status" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属仓库：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.wareName" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="货区编号：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.goodsNo" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.telephone" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="货位数目：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.totalNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="创建时间：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.deteTime1" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="仓库描述：" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关闭</el-button>
            <el-button type="primary" @click="saveProduct">保存</el-button>
        </div>
    </el-dialog>

    <el-dialog title="设置货架" :visible.sync="dialogFormVisible12" @close="closeMyDialog1">
        <el-form :model="shelvesAll1">
            <el-form-item label="货架编号" :label-width="formLabelWidth">
                <el-select v-model="shelvesAll1.wareId" placeholder="请选择" @change="pat">
                    <el-option
                            v-for="item in wareNames"
                            :label="item.wareName"
                            :value="item.wareNo">
                    </el-option>
                </el-select>
                <el-select v-model="shelvesAll1.damId" placeholder="请选择">
                    <el-option
                            v-for="item in goodsNames"
                            :label="item.goodsName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="货架编号" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll1.shelvesNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要商品" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll1.mainProduct" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货位数量" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll1.totalNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货架描述" :label-width="formLabelWidth">
                <el-input v-model="shelvesAll1.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <div class="block">
                    <el-date-picker
                            v-model="shelvesAll1.creatTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="shelvesAll1.status" placeholder="请选择">
                    <el-option
                            v-for="item in status1"
                            :label="item.statusName"
                            :value="item.statusId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关闭</el-button>
            <el-button type="primary" @click="saveShelves">保存</el-button>
        </div>
    </el-dialog>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                /*上部查询表单数据*/

                    shelvesNo12: "",
                    deteTime12:"",

                /*新增对话框*/
                dialogFormVisible: false,
                dialogFormVisible12:false,
                tableData:null,
                ind:"",
                ind1:"",
                ware:null,
                pageSize:5,
                wareNames:null,
                goodsNames:null,
                current:1,
                pdf:"",
                shelvesName2:"",
                total:0,
                formLabelWidth: '120px',
                newShelvesForm: {
                    shelvesName: ''
                },
                shelvesAll:{
                    shelvesNo:"",
                    goodsName:"",
                    person:"",
                    pname:"",
                    status:"",
                    wareName:"",
                    goodsNo:"",
                    telephone:"",
                    totalNum:"",
                    deteTime1:"",
                    remark:""
                },
                shelvesAll1:{
                    id:"",
                    wareId:"",
                    damId:"",
                    shelvesNo:"",
                    remark:"",
                    status:"",
                    mainProduct:"",
                    totalNum:"",
                    creatTime:""
                },
                status1:[{
                    statusName:"未满",
                    statusId:"0"
                },{
                    statusName:"满货",
                    statusId:"1"
                }]
            }
        },
        methods: {
            /*indexMethod(index) {
                return index * 2;
            },*/
            /*=====提交表单，传输表单数据=====*/
            onSubmit1() {
                axios.get("/t-ware/shelves?shelvesNo="+this.shelvesNo12).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data;
                    }
                })
            },
            /*表单重置*/
            resetForm(formName) {
                this[formName] = {}
                // this.$refs[formName].resetFields();
            },
            /*对话框表单提交*/
            submitAddForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        alert('添加成功!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            pat(val){
                axios.get("/selectCargoAreaAllgoodsName?val="+val).then(value => {
                    if (value.data.code = 1){
                        this.goodsNames=value.data.data
                    }
                })
            },
            handleEdit(index, row) {
                console.log( row);
                axios.put("/updateWareCargo",{shelvesNo:row.shelvesNo}).then(value => {
                    if(value.data.code==1){
                        this.loadPage(this.ind,this.current,this.pageSize)
                    }
                })
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.shelvesAll=row
                this.dialogFormVisible=true
            },
            resetAddForm(formName) {
                this[formName] = {}
            },
            handleSizeChange(pageSize) {
                //console.log(`每页 ${val} 条`);
                this.loadPage(this.ind,this.current,pageSize)
            },
            handleCurrentChange(current) {
                //console.log(`当前页: ${val}`);
                this.loadPage(this.ind,current,this.pageSize)
            },
            saveShelves(){
                axios.post("/addShelvesAll",this.shelvesAll1).then(value => {
                    if(value.data.code==1){
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        axios.get("/selectWareCargo").then(value => {
                            if (value.data.code = 1){
                                this.ware=value.data.data
                            }
                        })
                    }
                })
                this.dialogFormVisible12 =false
            },
            saveProduct(){
                axios.put("/updateShelvesById",this.shelvesAll).then(value => {
                    if(value.data.code==1){
                        if(this.tableData.size()>2){
                            this.selectOne(this.ind)
                        }else {
                            this.selectTwo(this.ind1)
                        }
                    }
                })

                this.dialogFormVisible =false
            },
            loadPage(index,current,pageSize){
                this.current=current
                this.pageSize=pageSize
                axios.get("/selectTwareOne?id="+index+"&current="+current+"&pageSize="+pageSize).then(value => {
                    if (value.data.code = 1){
                        this.tableData=value.data.data.records
                        this.total = value.data.data.total
                        this.pageSize = value.data.data.size
                        this.current = value.data.data.current
                        this.shelvesName2=  this.tableData[0].goodsName;
                    }
                })
            },
            //关闭对话框
            closeMyDialog(){
                //清空数据
                this.shelvesAll = {      //产品对话框的数据
                    shelvesNo:"",
                    goodsName:"",
                    person:"",
                    pname:"",
                    status:"",
                    wareName:"",
                    goodsNo:"",
                    telephone:"",
                    totalNum:"",
                    deteTime1:"",
                    remark:""
                }
            },
            //关闭对话框
            closeMyDialog1(){
                //清空数据
                this.shelvesAll1 = {      //产品对话框的数据
                    id:"",
                    wareId:"",
                    damId:"",
                    shelvesNo:"",
                    remark:"",
                    status:"",
                    mainProduct:"",
                    totalNum:""
                }
            },
            selectOne(index){
                //console.log(index)
                this.ind=index
                this.loadPage(this.ind,1,5)
            },
            selectTwo(index){
                this.ind1=index;
                console.log(index)
                axios.get("/selectTwareShelvesOne?sId="+index+"&goodsName="+this.shelvesName2).then(value => {
                    if(value.data.code==1){
                        this.tableData=value.data.data
                        this.total = 1
                        this.pageSize = 5
                        this.current = 1
                    }
                })
            }
            },
            mounted() {
            axios.get("/selectWareCargo").then(value => {
                if (value.data.code = 1){
                    this.ware=value.data.data
                }
            }),
                axios.get("/selectTwareAllwareName").then(value => {
                    if (value.data.code = 1){
                        this.wareNames=value.data.data
                    }
                })

        }
    })
</script>
</body>
</html>